<template>
  <div class="portRange" :style="commpStyle">
    <div v-if="type == 'select'" style="width: 100%;">
      <span style="display: inline-block;width: 49%;">
        <el-select :type="type" :size="size" :readonly="readonly" v-model="value1" @change="InputChange" clearable>
          <el-option v-for="(item,index) in dicData" :value="item[dicLabel.value]" :label="item[dicLabel.label]" :key="'value1_'+index"></el-option>
        </el-select>
      </span>
      <span style="display: inline-block;width: 2%;text-align: center">{{split}}</span>
      <span style="display: inline-block;width: 49%;">
        <el-select :type="type" :size="size" :readonly="readonly" v-model="value2" @change="InputChange" clearable>
          <el-option v-for="(item,index) in dicData" :value="item[dicLabel.value]" :label="item[dicLabel.label]" :key="'value2'+index"></el-option>
        </el-select>
      </span>

    </div>
    <div v-if="type != 'select'" style="width: 100%;">
      <span style="display: inline-block;width: 49%;">
        <el-input :type="type" :size="size" :readonly="readonly" v-model="value1" @input="InputChange" @blur="blurChange"></el-input>
      </span>
      <span style="display: inline-block;width: 2%;text-align: center">{{split}}</span>
      <span style="display: inline-block;width: 49%;">
        <el-input :type="type" :size="size" :readonly="readonly" v-model="value2" @input="InputChange" @blur="InputBlur"></el-input>
      </span>
    </div>
  </div>
</template>
<script>
import baseComp from './baseComp.vue';
export default {
  name: 'portRange',
  model:{
    prop:"value",
    event:"rangeChange",
  },
  extends: baseComp,
  data(){
    return{
      value1:'',
      value2:'',
      dicData: [],
      localDicFormatter: ''
    }
  },
  props:{
    value:{
      type:String,
      default:()=>''
    },
    readonly:{
      type:Boolean,
      default: false
    },
    split:{
      type: String,
      default:()=>'-'
    },
    size: {
      type: String,
      default:()=>'small'
    },
    prefix:{
      type: String,
      default:()=>''
    },
    type: {
      type: String,
      default:()=>'number'
    },
    queryConfig: {
      type: Object,
      default:()=>{
        return {
          initUrl: '',
          method: 'post',
          queryParam: {}
        }
      }
    },
    dicFormatter: '',
    dicLabel: {
      type: Object,
      default:()=>{
        return {
          desc: 'desc',
          label: 'label',
          value: 'value'
        }
      }
    }
  },
  watch:{
    value: {
      handler(val){
        if(val){
          let Arr=val.split(this.split);
          this.value1=Arr[0];
          this.value2=Arr[1];
        }
      },
      deep:true,
      immediate:true,
    },
    dicFormatter: {
      handler(val){
        if(val){
          if (typeof this.dicFormatter != 'function'){
            this.localDicFormatter = eval(this.dicFormatter);
          }else {
            this.localDicFormatter = this.dicFormatter;
          }
        }
      },
      deep:true,
      immediate:true,
    }
  },
  created() {
    this.init();
  },
  methods:{
    /**
     * 初始化函数
     */
    init(){
      if (this.queryConfig.initUrl){
        this.$myAxios.request(this.queryConfig.method,this.queryConfig.initUrl,this.queryConfig.queryParam).then(res => {
          if (typeof this.localDicFormatter != 'function'){
            this.localDicFormatter = eval(this.dicFormatter);
          }
          return this.localDicFormatter(res.data);
        }).then(res => {
          this.dicData = res;
        })
      }
    },
    /**
     * 提交函数值到v-model中
     * @constructor
     */
    InputChange(){
      if(this.value1!='' && this.value2!=''){
        let str = this.prefix+this.value1+this.split+this.value2
        this.$emit('rangeChange', str);
        this.$emit('change', str);
      }
    },
    InputBlur(){
      if(this.value1==''){
        this.$message.info("请输入起始值")
      }
      if(this.value2<0){
        this.$message.info("末端值不能为负值")
        this.value2='';
      }
    },
    blurChange(){
      if(this.value1<0){
        this.$message.info("起始值不能为负数")
        this.value1='';
      }
    }
  }
}
</script>
<style lang="less" scoped>
.range{
  /deep/.el-input--small{
    width:200px;
  }
}
</style>
